<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="picbox.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #e7e7e7;
        }

        .img-scroll {
            width: 1200px;
            background: #fff;
            position: relative;
            padding: 20px 0;
            margin-top: 20px;
        }

        .app-imgs {
            width: 1080px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        .app-imgs-wrapper {
            display: table-cell;
            position: relative;
            float: left;
            z-index: 1;
            _position: static;
            white-space: nowrap;
            font-size: 0;
        }

        .app-imgs-wrapper img {
            width: 355px;
            height: 200px;
        }

        .app-imgs-wrapper li {
            display: inline-block;
            margin-right: 20px;
        }

        .app-imgs-prev,
        .app-imgs-next {
            position: absolute;
            top: 50%;
            z-index: 2;
            width: 35px;
            height: 70px;
            margin-top: -35px;
            border-radius: 3px;
            opacity: .15;
            background: red;
            text-indent: -9999px;
            background-repeat: no-repeat;
            transition: opacity .2s linear 0s;
        }

        .app-imgs-prev {
            background: url("images/arrow-left.png") #000 50% no-repeat;
        }

        .app-imgs-next {
            right: 0;
            background: url("images/arrow-right.png") #000 50% no-repeat;
        }
    </style>
</head>
<body style="height: 3000px">
<div class="img-scroll">
    <div class="app-imgs">
        <ul class="app-imgs-wrapper">
            <li><img src="img/img_2dbe8ee8.png" alt=""></li>
            <li><img src="img/img_986b8260.png" alt=""></li>
            <li><img src="img/img_e7115081.png" alt=""></li>
            <li><img src="img/img_bdd4c614.png" alt=""></li>
        </ul>
    </div>
    <a href="javascript:;" class="app-imgs-prev">上一张</a>
    <a href="javascript:;" class="app-imgs-next">下一张</a>
</div>
<div class="img-scroll">
    <div class="app-imgs">
        <ul class="app-imgs-wrapper">
            <li><img src="img/img_2dbe8ee8.png" alt=""></li>
            <li><img src="img/img_986b8260.png" alt=""></li>
            <li><img src="img/img_e7115081.png" alt=""></li>
            <li><img src="img/img_bdd4c614.png" alt=""></li>
            <li><img src="img/img_e795577e.png" alt=""></li>
        </ul>
    </div>
    <a href="javascript:;" class="app-imgs-prev">上一张</a>
    <a href="javascript:;" class="app-imgs-next">下一张</a>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/picscroll.js"></script>
<script>
    picscroll({
        pics: '.app-imgs-wrapper',
        prev: '.app-imgs-prev',
        next: '.app-imgs-next'
    });
</script>
</body>
</html>
